<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<style>
			html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
			<a class="mui-pull-right" id="shopcart"><span class="mui-icon iconfont icon-chaoshi"></span></a>
		</header>
		<div class=" product_detail mui-table-view mui-grid-view">
			<ul id="parent" class="" style="margin-top: 1px;padding-left: 0;">
				<!--<li class="mui-table-view-cell mui-media mui-col-xs-12">
					<a href="#">
						<img class="mui-media-object" src="../../image/product1-original.jpg" style="">
					</a>
					<div class="blocks cont">
						<div class="mui-clearfix block_title" style="min-height: 31px; max-height: 41px;">
							<span class="">悠悠飘香奶茶</span>
						</div>
						<p class="mui-h6">
							<span class="mui-badge mui-badge-danger mui-badge-inverted">￥ 5.00</span>
						</p>
					</div>
					<div class="blocks cont">
						<div class="mui-clearfix block_title" style="min-height: 31px; max-height: 41px;">
							<span class="">商品评价</span>
						</div>
	
					</div>
				</li>-->
			</ul>
			<div class="mui-clearfix actions mui-hidden">
				<button class="mui-btn mui-btn-negative mui-pull-right">加入购物车</button>

				<button class="mui-hidden mui-btn mui-btn-negative mui-pull-right">立即购买</button>
			</div>

		</div>
		<nav class="mui-bar mui-bar-tab">
		  <a class="mui-tab-item mui-active" href="#">
		    
		  </a>
		  <a class="mui-tab-item" href="#">
		    
		  </a>
		  <a class="mui-tab-item mui-btn-negative " href="#" style="color: white;" id="addToCart">
		    加入购物车
		  </a>
		</nav>
	</body>

	<script id="tmpl" type="text/html">
		<li class="mui-table-view-cell mui-media mui-col-xs-12">
			<a href="#">
				<img class="mui-media-object" src="../../image/product{{id}}-original.jpg" style="">
			</a>
			<div class="blocks cont">
				<div class="mui-clearfix block_title" style="min-height: 31px; max-height: 41px;">
					<span class="">{{name}}</span>
				</div>
				<p class="mui-h6">
					<span class="mui-badge mui-badge-danger mui-badge-inverted">￥ {{price}}</span>
				</p>
			</div>
			<div class="blocks cont">
				<div class="mui-clearfix block_title" style="min-height: 31px; max-height: 41px;">
					<span class="">商品评价: </span>
				</div>
			</div>
			<div class="blocks cont mui-hidden">
				<div class="mui-clearfix block_title" style="min-height: 31px; max-height: 41px;">
					<span class="">商品详情</span>
				</div>
			</div>
		</li>

	</script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/template.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/_API.js"></script>
	<script>
		var load = function(id){
			id = id || 1;
			if(!id) {
				return ;
			}
			mui.scrollTo(0, 1);//滚到顶
			
			var datas = {
				1:
				{
					name:"悠悠飘香奶茶",
					price:5.88,
					id:1,
					company:"西安今生缘有限公司"
				},
				2:
				{
					name:"可口营养早餐面包",
					price:6.88,
					id:2,
					company:"西安今生缘有限公司"
				},
				3:
				{
					name:"哈尔滨啤酒！一起来哈皮！",
					price:8.00,
					id:3,
					company:"西安今生缘有限公司"
				},
				4:
				{
					id:4,
					name:"浓香咖啡",
					price:15.80,
					company:"西安今生缘有限公司"
				}
			}
			
			var json = datas[id]
	    	var html = template('tmpl', json);
			document.getElementById('parent').innerHTML = html;


		}
		window.addEventListener('changeId',function(event){
			var id = event.detail.id;
			load(id);
		});
		//open shopcart page while tap shopcart icon
		document.getElementById('shopcart').addEventListener('tap', function() {
		  //打开关于页面
		  mui.openWindow({
		    url: 'shopcart.html', 
		    id:'shopcart',
			styles: {
				top: 0,
				bottom: 0,
				zindex: 999999
			}
		  });
		});
		document.getElementById('addToCart').addEventListener('tap', function() {
		  //add to cart
		  
		  mui.toast("添加到购物车成功！")
		});

		mui.plusReady(function() {
			mui.init();
			var data = plus.webview.currentWebview().data;
			if(data) {
				load(data.id);
			}
		});
	</script>

</html>